<template>
  <div class="payment_index">
    <div class="payment_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">案例列表<i class="el-icon-close"></i></div>
    </div>
    <div class="payment_index_bottom">
      <div class="payment_index_bottom_new">
        <div class="payment_index_bottom_new_goods">
          <div class="payment_index_bottom_new_goods_btn">
            <el-button type="primary" @click="handleAdd">新增案例</el-button>
          </div>
          <div class="payment_index_bottom_new_goods_screening">
            <div class="payment_index_bottom_new_goods_screening_left">
              <i>选择小区</i>
              <el-select
                v-model="tagType"
                @change="getTag"
                multiple
                popper-class="el-select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in shopTagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="payment_index_bottom_new_goods_screening_right">
              <el-input
                v-model="input"
                clearable
                @input="clearInput"
                placeholder="请输入订单信息查询"
              ></el-input>
              <button @click="searchBtn"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="payment_index_bottom_table_box">
        <div class="payment_index_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>标题</th>
              <th>小区</th>
              <th>户型</th>
              <th>面积</th>
              <th>报价</th>
              <th>排序</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>
                <font
                  class="checkbox"
                  :class="{ check_active: checkBoxAll.includes(i) }"
                  @click="handlerCheckbox(i)"
                  ><i class="el-icon-check"></i
                ></font>
              </td>
              <td>{{ i + 1 }}</td>
              <td>{{ v.title }}</td>
              <td>{{ v.estate }}</td>
              <td>{{ v.house_type }}</td>
              <td>{{ v.area }}m²</td>
              <td>{{ v.offer }}万</td>
              <td>
                <el-input
                  style="width: 80px; margin-right: 10px"
                  size="mini"
                  v-model="v.sort"
                ></el-input>
                <el-button
                  type="primary"
                  style="width: 60px; text-align: center"
                  size="mini"
                  @click="changeSort(v.id, v.sort)"
                  >确定</el-button
                >
              </td>
              <td>
                <button
                  class="editor"
                  @click="_toShopInfo(v.id)"
                  :data-id="v.id"
                >
                  详情
                </button>
                <button class="shelves" @click="handleDel(v.id)">删除</button>
                <!-- <button class="delete">关闭订单</button> -->
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="sale_bottom_page">
      <div class="sale_bottom_page_left">
        <div class="sale_bottom_page_left_checkAll" @click="handerCheckAll">
          <font class="checkbox" :class="{ check_active: checkAll }"
            ><i class="el-icon-check"></i
          ></font>
          <div class="checkbox-botton">全选</div>
        </div>
        <el-button type="primary" @click="selectDel" :disabled="openIsDisabled"
          >删除</el-button
        >
      </div>
      <div class="sale_bottom_page_right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
	
	<script>
// import util from '@/uitls/util';
export default {
  data() {
    return {
      input: "",
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [], // 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      tagType: [], //店铺标签
      shopTagList: [],
      value2: "",
      sid: null,
      openIsDisabled: false, //按钮的禁用
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      estate_id: "",
    };
  },
  mounted() {
    this.sid = localStorage.getItem("sid");
    this._getOrdersList();
  },
  methods: {
    // 排序按钮
    changeSort(id, sort) {
      console.log(id, sort, "=====");
      let sor = { [`${id}`]: sort };
      let sortArr = JSON.stringify(sor);
      this.$http
        .post("/api/admin/designer/DesignCase/saveOrder", { sort: sortArr })
        .then((res) => {
          console.log(res, "排序结果");
          if (res.code == 1) {
            this._getOrdersList();
            this.$message.success("操作成功");
          } else {
            this.$message.warning(res.msg);
          }
        });
    },

    // 多选
    handlerCheckbox(i) {
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index > -1) {
          arr.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      this.shelvesAlls.push(this.tableList[i].id);
      console.log(this.shelvesAlls, "选中的");
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
      } else {
        this.checkBoxAll = [];
      }
      // 去重
      let res = this.checkBoxAll;
      for (let i = 0; i < res.length; i++) {
        for (let j = i + 1; j < res.length; j++) {
          if (res[i] == res[j]) {
            res.splice(j, 1);
            j--;
          }
        }
      }
      // 全选下架
      // this.checkBoxAll.map(v => {
      //   return this.shelvesAlls.push(this.tableList[v].product_id.toString());
      // });
    },
    // 选中删除
    selectDel() {
      this.$confirm("此操作将删除选中商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let selectID = this.shelvesAlls.join(",");
          this.$http
            .post("/api/admin/designer/DesignCase/del", {
              id: selectID,
            })
            .then((res) => {
              if (res.code == 1) {
                this._getOrdersList();
                this.checkBoxAll = [];
                if (this.checkBoxAll.length == 0) {
                  this.checkAll = false;
                  this.openCenter();
                }
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取选中店铺标签
    getTag(value) {
      let valueStr = value.toString();
      this.cate_list = valueStr;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this._getOrdersList();
    },
    hangerInto() {
      this.$router.push({ path: "/paymentDetails" });
    },
    // 获取待接单列表
    _getOrdersList() {
      let role = localStorage.getItem("role");
      let params = {
        designer_id: role == "decoration" ? "" : this.sid,
        decoration_id: role == "decoration" ? this.sid : "",
        estate_id: this.estate_id,
        keyword: this.input,
        page: this.page,
        pagesize: this.pagesize,
      };
      let url =
        role == "decoration"
          ? "/api/admin/decoration/DesignCase/index"
          : "/api/admin/designer/DesignCase/index";
      this.$http.post(url, params).then((res) => {
        console.log(res, "案例列表数据");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total; //总条数
          this.shopTagList = res.data.estate_list;
          if (this.tableList.length == 0) {
            this.openIsDisabled = true;
          } else {
            this.openIsDisabled = false;
          }
        }
      });
    },

    // 搜索按钮
    searchBtn(){
      const that = this;
      that.page = 1 
      that.pagesize = 10
      that._getOrdersList()
    },

    // 清除搜索
    clearInput(){
      const that = this;
      if(that.input==''){
        that.page = 1;
        that.pagesize = 10;
        that._getOrdersList()
      }
    },

    // 消息提示
    openCenter() {
      this.$message({
        message: "删除成功",
        type: "success",
        duration: 2000,
        center: true,
      });
    },

    //点击详情跳转
    _toShopInfo(id) {
      // console.log(e);
      // let id = e.target.dataset.id;
      this.$router.push({ name: "caseDetail", query: { id } });
    },

    // 点击添加按钮
    handleAdd() {
      this.$router.push({ name: "caseDetail", query: {} });
    },

    handleDel(event) {
      let params = {
        id: event,
      };
      this.$api.DesignCase_del(params).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this._getOrdersList();
        }
      });
    },
  },
};
</script>


<style lang="less" scoped="scoped">
@import "index.less";
</style>
